<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:p="http://primefaces.org/ui"
	template="/templates/userLayout.xhtml">

	<ui:define name="pageTitle">#{out.index_title}</ui:define>

	<ui:define name="head-extra">
		<!-- custom css -->
	</ui:define>

	<ui:define name="dialogs">
		<p:dialog header="Images" widgetVar="productImage" modal="true"
			dynamic="true" position="center" styleClass="autoWidthDialog"
			resizable="false">
			<p:panelGrid columns="3" style="width:100%;">
				<p:commandButton value="Prev" style="width:100%; height: 100%;"
					action="#{simpleProductController.stepImage(false)}"
					update=":productImageBox" />
				<p:commandButton value="Close" style="width:100%; height: 100%;"
					onmouseup="PF('productImage').hide();" />
				<p:commandButton value="Next" style="width:100%; height: 100%;"
					action="#{simpleProductController.stepImage(true)}"
					update=":productImageBox" />
			</p:panelGrid>
			<h:form id="productImageBox">
				<div style="width: 100%; height: 100%;">
					<p:graphicImage value="#{imageBean.image}" styleClass="showIMG">
						<f:param name="id"
							value="#{simpleProductController.selectedImage.imageDataId}" />
					</p:graphicImage>
				</div>
			</h:form>
		</p:dialog>
	</ui:define>

	<ui:define name="content">		
		<h:form id="currentProduct">
			<p:panelGrid
				rendered="#{simpleProductController.selectedProduct!=null}">
				<div class="ui-grid ui-grid-responsive productRow">
					<div class="ui-grid-row" style="width: 98%;">
						<div class="ui-grid-col-6">
							<p:fieldset legend="Details" styleClass="productBox">
								<h:outputText value="Name: " />
								<h:outputText
									value="#{simpleProductController.selectedProduct.name}"
									style="font-weight: bold" />
								<br />
								<h:outputText value="Price: " />
								<h:outputText
									styleClass="#{simpleProductController.selectedProduct.isSpecial?'dottedText':''}"
									value="#{simpleProductController.selectedProduct.price}"
									style="font-weight: bold" />
								<br />
								<h:outputText value="Special Price: "
									rendered="#{simpleProductController.selectedProduct.isSpecial}" />
								<h:outputText
									rendered="#{simpleProductController.selectedProduct.isSpecial}"
									value="#{simpleProductController.selectedProduct.specialPrice}"
									style="font-weight: bold" />
								<br />
								<h:outputText value="Text:" />
								<h:outputText escape="false"
									value="#{simpleProductController.selectedProduct.text}"
									style="font-weight: bold" />
							</p:fieldset>
						</div>
						<div class="ui-grid-col-6">
							<p:fieldset
								legend="Images (#{simpleProductController.selectedProduct.images.size()})"
								styleClass="productBox">
								<ui:repeat
									value="#{simpleProductController.selectedProduct.images}"
									var="image">
									<p:commandLink
										action="#{simpleProductController.initImageView(image)}"
										update=":productImageBox"
										onmouseup="PF('productImage').show();">
										<p:graphicImage value="#{imageBean.image}"
											styleClass="productIMG"
											alt="#{simpleProductController.selectedProduct.name} : #{image.fileName}"
											title="#{simpleProductController.selectedProduct.name}">
											<f:param name="id" value="#{image.imageDataId}" />
										</p:graphicImage>
									</p:commandLink>
								</ui:repeat>

								<p:graphicImage name="/images/no_image.jpg"
									style="height: auto; width: 100%; max-height:100px;"
									visible="#{simpleProductController.selectedProduct.images.size() == 0}"
									rendered="#{simpleProductController.selectedProduct.images.size() == 0}">
								</p:graphicImage>
							</p:fieldset>
						</div>
					</div>
					<div class="ui-grid-col-6">
						<p:fieldset legend="Add to cart" styleClass="productBox">
							<p:fragment autoUpdate="true">
								<h:outputText value="Quantity" />
								<p:inputText id="quantity" value="#{cartController.quantity}">
								</p:inputText>
								<p:commandButton value="ADD"
									action="#{cartController.addElementToCart(simpleProductController.selectedProduct)}"
									update=":cart" />
							</p:fragment>
						</p:fieldset>
					</div>
				</div>
			</p:panelGrid>
		</h:form>
	</ui:define>

</ui:composition>